<template>
    <div class="sleftlist">
        <div class="flex aic jc-sb">
            <h5 @click="() => { emits('change') }" class=" flex aic title">SALES ORDER LIST</h5>
            <el-select v-model="user_uid" @focus="() => { emits('getSaleCustomer') }" clearable @change="getSorderList"
                :remote-method="(val) => { emits('getSaleCustomer', val) }" remote remote-show-suffix filterable class="m-2"
                size="small" placeholder="Enter customer name">
                <el-option v-for="item in customerList" :key="item.user_uid" :label="item.firstname"
                    :value="item.user_uid" />
            </el-select>
        </div>
        <div class="orderlist">
            <el-table ref="refsOrderList" :data="orderList" v-loading="sorderLeading" @selection-change="SelectionMethod"
                :cell-style="setCellStyle" v-el-table-infinite-scroll="refresh" @row-click="handeclick" height="100%">
                <el-table-column type="selection" width="20" />
                <el-table-column fixed prop="PI_name" label="SodrderID" width="140" />
                <el-table-column prop="state_text" label="State" width="120" />
                <el-table-column prop="items" label="Items" />
                <el-table-column prop="iso_code_2" label="City" />
                <el-table-column prop="firstname" label="Client" width="100" />
            </el-table>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
    customerList: Object,
    orderList: Object,
    order_id: Number,
    sorderLeading: Boolean
})
const emits = defineEmits(['getorder', 'refreshOrderList', 'change', 'SelectionMethod', 'getSaleCustomer', 'getOrderList'])
const user_uid = ref('')
const setCellStyle = ({ row }) => {
    if (row.order_id == props.order_id) {
        return {
            color: '#409eff !important'
        }
    }
}

// 多选框
const SelectionMethod = (val) => {
    emits('SelectionMethod', val)
}
// 根据用户来筛选
const getSorderList = () => {
    emits('getOrderList', user_uid.value)
}
const refsOrderList = ref()
const handeclick = (row) => {
    emits('getorder', row)

}
// 刷新方法
const refresh = () => {
    emits('refreshOrderList')
}
defineExpose({
    refsOrderList
})
</script>

<style lang="less">
.sleftlist {
    width: 100%;
    height: 46vh;
    box-sizing: border-box;

    .title {
        height: 4vh;
        padding-left: 10px;
    }

    .orderlist {
        padding: 10px;
        border-radius: 10px;
        background-color: #ffffff;
        height: 43vh;
    }

    .el-table .cell {
        padding: 0;
    }
}
</style>


